<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:with="title='二手书商城登录',active='home'">
<head>
    <meta charset="utf-8" />
    <title>注册</title>
    <script type="text/javascript">
        function checkinput() {
            if (myform.username.value === "") {
                alert("请输入用户名");
                myform.username.focus();
                return false;
            }
            if (myform.pass_word.value === "") {
                alert("请输入密码");
                myform.pass_word.focus();
                return false;
            }
            if (myform.pass_word.value !== myform.pwdconfirm.value) {
                alert("你输入的两次密码不一致，请重新输入！");
                myform.pass_word.focus();
                return false;
            }
            if (myform.userSex.value === "") {
                alert("请输入性别");
                myform.userSex.focus();
                return false;
            }
        }

        function check() {
            const checkbox = document.getElementById("ch");
            const btn = document.getElementById("but");
            if (checkbox.checked) {
                btn.style.backgroundColor = "#4caf50";
                btn.style.color = "#fff";
                btn.removeAttribute("disabled");
            } else {
                btn.setAttribute("disabled", "disabled");
                btn.style.backgroundColor = "#ccc";
                btn.style.color = "#666";
            }
        }
    </script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(to right, #83a4d4, #b6fbff);
            font-family: "Microsoft YaHei", sans-serif;
            color: #333;
        }

        .container {
            width: 420px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            margin: 100px auto;
            padding: 40px 30px;
        }

        .right h1 {
            margin-bottom: 30px;
            color: #444;
        }

        .right p {
            margin-bottom: 20px;
            font-size: 14px;
            text-align: left;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 6px;
            outline: none;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #4caf50;
        }

        button {
            background-color: #ccc;
            border: none;
            color: #666;
            padding: 10px 0;
            width: 100%;
            font-size: 16px;
            border-radius: 6px;
            cursor: not-allowed;
            transition: all 0.3s;
        }

        button:enabled {
            background-color: #4caf50;
            color: white;
            cursor: pointer;
        }

        .agree {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .agree input {
            margin-right: 10px;
        }
    </style>
</head>

<body>
<form action="/admin/register" method="get" name="myform" onsubmit="return checkinput();">
    <div class="container">
        <div class="right">
            <h1>用户注册</h1>
            <p>用户名: <input type="text" name="uname" id="username" placeholder="请输入姓名"></p>
            <p>密　码: <input type="password" name="upassword" id="pass_word" placeholder="请输入密码"></p>
            <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm" placeholder="请确认密码"></p>
            <p>性　别: <input type="text" name="usex" id="userSex" placeholder="请输入性别"></p>

            <div class="agree">
                <input type="checkbox" name="agree" id="ch" onclick="check()" value="0"/>
                <label for="ch">我已阅读并同意《用户注册协议》</label>
            </div>

            <p><button type="submit" id="but" disabled>立即注册</button></p>
        </div>
    </div>
</form>
</body>
</html>
